<template>
  <div class="bigBox">
    <div class="smallBox">
      <div class="sLeft">
        <img src="../assets/register.svg" alt="" class="sImg">
      </div>
      <div class="sRight">
        <!--:rules="rules" 表单校验-->
        <el-form :model="user" :rules="rules" style="width: 80%;" ref="registerRef">
          <div class="rfTitle">欢迎注册后台管理系统</div>
          <el-form-item prop="username">
            <!--size="medium"表示设置输入框为中等大小，默认是smali-->
            <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入账号"
                      v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请输入密码"
                      v-model="user.password"></el-input>
          </el-form-item>
          <el-form-item prop="confirmPass">
            <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请确认密码"
                      v-model="user.confirmPass"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="warning" style="width: 100%" @click="registerUser" v-model="user.code">注 册</el-button>
          </el-form-item>
          <el-form-item>
            <div style="display: flex" class="pointer">
              <div style="flex: 1">已有账号？请<span @click="$router.push('/login')">登录</span></div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import ValidCode from "@/components/ValidCode.vue";
import {msg} from "@babel/core/lib/config/validation/option-assertions";

export default {
  name: 'Register',
  components: {
    ValidCode
  },
  data() {
    //验证码校验
    const validatePassword = (rule, confirmPass, callback) => {
      if (confirmPass === '') {
        callback(new Error('请确认密码'));
      } else if (confirmPass !== this.user.password) {
        callback(new Error('两次输入密码不匹配'))
      } else {
        callback()
      }
    }

    return {
      user: {
        username: '',
        password: '',
        confirmPass: ''
      },
      rules: {
        username: [
          {required: true, message: '请输入账号', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],
        confirmPass: [
          {validator: validatePassword, trigger: 'blur'}
        ],
      },
    }
  },
  methods: {
    registerUser() {
      this.$request.post('/web/register', this.user).then(res => {
      if (res.code==='200'){
        this.$router.push('/login')
        this.$message.success('注册成功')
      }else {
        this.$message.error(res.msg)
      }
      })
    }
  },
}


</script>


<style scoped>

.bigBox {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(1, 65, 42, 0.79);
}

.smallBox {
  display: flex;
  background-color: white;
  width: 50%;
  border-radius: 5px;
  overflow: hidden; /*将低下的元素将图片多余出来的部分给盖住*/
}

.sImg {
  width: 100%;
  height: 100%;
}

.sLeft {
  flex: 1;
}

.sRight {
  flex: 1;
  display: grid;
  align-items: center;
  justify-items: center;
}

.rfTitle {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.pointer span {
  color: #0f9876;
  cursor: pointer
}

</style>